<template>
  <view>
    <Header type="back" />
    <view class="w-100" :class="'h' + bar_height"></view>
    <view
      class="bg-f8ff w-100 ab left0 bottom0 rounded-right"
      :class="'top' + bar_height"
    >
      <view class="w-100 px-2-6 ov-hd-y ab top30 left0 bottom0">
        <view class="show0 circle34">
          <view class="w-100 h108 bg-white rounded-left-34">
            <view class="w-100 h-100 bg-theme rounded-bottom-34 f-b-c px-4">
              <view class="font45 t-20 font600"
                >订单{{ set_pay_status(details.orderStatus) }}</view
              >
              <!-- <view
                class="font28 font600 t-20"
                v-if="details.orderStatus == 'PAID'"
                >积分<text class="t-theme_1"
                  >+{{ details.incomeIntegral }}</text
                ></view
              > -->
            </view>
          </view>
          <view class="w-100 bg-theme rounded-right-34">
            <view class="w-100 bg-white rounded-top-34 px-2-4 py-4">
              <view
                :style="{
                  padding: '10px 0',
                  borderBottom:
                    index === details.goodsList.length - 1
                      ? 'none'
                      : '1px solid #e6e6e6',
                }"
                v-for="(item, index) in details.goodsList"
                :key="item.id"
              >
                <view class="w-100 f-b-c mb-2">
                  <ImageFile
                    :url="baseUrl + item.thumbnail"
                    className="w140 h140 circle13"
                  />
                  <view class="w480 pt-1">
                    <view class="f-b-c" style="margin-bottom: 10px">
                      <view
                        class="font25 t-20 font500"
                        style="font-weight: bold"
                      >
                        {{ item.goodsName || "" }}
                      </view>
                      <view class="font22 t-20 font500" style="color: red"
                        >￥{{ item.totalFee || "0" }}</view
                      >
                      <!-- <view
                        style="font-size: 14px"
                        v-if="ticketCode(item)"
                        class="px-2-6 h40 circle12 font22 f-c-c bg-theme"
                        @click="show_qrcode(item)"
                        >查看二维码</view
                      > -->
                    </view>
                    <!-- <view class="font21 t-8 f-b-c">
                      <view>{{ item.remark || "" }}</view>
                      <view class="font22 t-20 font500"
                        >￥{{ item.totalFee || "0" }}</view
                      >
                    </view> -->
                    <view
                      class="font21 t-20 f-b-c"
                      v-if="item.orderType == 'TICKET'"
                      >{{ item.startTime }} 至 {{ item.endTime }}</view
                    >
                    <view
                      style="
                        display: flex;
                        justify-content: space-between;
                        margin-top: 5px;
                      "
                    >
                      <text
                        class="font22 t-8"
                        :style="{ color: item.destroy ? 'red' : '#666' }"
                        >{{ item.destroy ? "已核销" : "未核销" }}</text
                      >
                      <text class="font22 t-8">×{{ item.number || "0" }}</text>
                    </view>
                  </view>
                </view>
                <QrCode
                  v-if="item.qrCode && details.orderStatus !== 'REFUND'"
                  :text="item.qrCode"
                />
                <!-- <div
                  class="qr-code-box flex-center"
                  style="margin-bottom: 10px"
                  v-if="item.qrCode"
                >
          
                  <u-qrcode
                    ref="qrcode"
                    canvas-id="qrcode"
                    size="168"
                    :value="item.qrCode"
                  ></u-qrcode>
                </div> -->
                <view
                  class="order-msg font22 t-8 pt-2"
                  style="margin-bottom: 20rpx"
                >
                  <view class="f-b-c f-s-a"
                    ><text style="font-weight: bold">订单须知</text
                    ><text
                      style="color: #318c26"
                      v-if="details.goodsList && details.goodsList.length > 1"
                      @click="handleRow(item, index)"
                      >{{ item.isShowMsg ? "折叠" : "展开" }}</text
                    ></view
                  >
                  <view
                    style="margin-top: 10rpx"
                    v-if="
                      item.isShowMsg ||
                      (details.goodsList && details.goodsList.length === 1)
                    "
                  >
                    <!-- <rich-text
                      :nodes="item.content || '<span>-</span>'"
                    ></rich-text> -->
                    <richText :rich_text="item.goodsRemark"></richText>
                  </view>
                </view>
              </view>

              <!-- <view class="w-100 py-2 f-c-c" v-if="ticketCodeInfo">
                <view
                  class="w364 h90 circle16 font24 f-c-c bg-theme"
                  @click="show_qrcode(details)"
                  >查看二维码</view
                >
              </view> -->

              <!-- 	<view class="w-100 h426 f-c-c" >
								<u-qrcode ref="qrcode" canvas-id="qrcode" size="144" :value="ticketCode"></u-qrcode>
							</view> -->

              <!-- <view class="w-100 border-bottom f-b-c py-2">
                <view class="font25 t-20">优惠券</view>
                <view class="font24 font500 t-ed"
                  >-¥{{ details.couponFee || "0" }}</view
                >
              </view> -->

              <view class="f-b-c font22 t-8">
                <text style="font-weight: bold"
                  >订单编号：{{ details.id }}</text
                >
                <view class="fon24 font500 t-20" @click="copy_order()"
                  >复制</view
                >
              </view>

              <view class="w-100 h90 f-e-c font28 font700 t-20">
                <text class="font21 font400"
                  >共{{ details.totalNum || "0" }}张，合计</text
                ><text style="color: red">￥{{ details.payFee || "0" }}</text>
              </view>

              <!-- <view class="pt-2 font25 font500 t-20">订单信息</view> -->

              <!-- <view class="w-100 f-s-a font22 t-8 pt-2">
								<view>订单须知：</view>
								<view class="w538">
									<view>
									订单支付成功后，系统将生成电子门票，请向工作人员出示  电子门票二维码。验票通过后，工作人员将为宝宝佩戴电子手环，并与家长的小程序账号进行鄉定。
									本产品门票仅限1大1小使用1次，每多一位成人，需额外支付人民币100元购买陪同票，每多一位未成年人，需额外购买张门票。
									</view>
									<view>注：1大指年满18周岁以上（含18周岁） 成年人，仆指未满18周岁未成年人。</view>
									<view>特殊群体： 6个月以下婴幼儿提供有效身份证件后可作为持卡儿童的陪同伙伴免票入场。</view>
									<view>3.建议孕妇、老人、身体有障碍人士在充分考虑自身状况后使用本产品。</view>
								</view>
							</view>
							 -->
              <!-- <view class="w-100 f-s-a font22 t-8 pt-2">
                <view>特别提醒：</view>
                <view class="w538"
                  >本产品限定席次，订购后游玩当日及过期不支持退票，如有退票请务必于游玩日期前一日或更早日期申请.</view
                >
              </view> -->
            </view>
          </view>
        </view>
        <view class="f-b-c pt-6">
          <view></view>
          <view
            class="bg-theme circle20 h64 w164 f-c-c"
            @click="get_pay(details)"
            v-if="details.orderStatus === 'UNPAID'"
            >立即支付</view
          >
        </view>
        <view class="w-100 h180"></view>
      </view>
    </view>

    <uni-popup ref="qrcode_code" type="center">
      <view class="w696 h752 circle54 bg-f8ff ov-hd show0" v-if="qrcode.show">
        <view
          class="w-100 h146 f-c-c bg-theme radius-54-botton font40 t-0 font600"
        >
          {{ qrcode.goodsName || "二维码信息" }}
          <!-- 二维码信息 -->
        </view>
        <view class="w-100 h606 bg-theme re">
          <view class="w-100 h-100 bg-f8ff radius-54-right px-6">
            <view class="w-100 h476 f-c-c">
              <u-qrcode
                ref="qrcode"
                canvas-id="qrcode"
                size="168"
                :value="qrcode.qrCode"
              ></u-qrcode>
            </view>
          </view>
          <view class="w-100 h100 f-c-c ab px-6 left0 bottom40">
            <view
              class="w270 h90 bg-theme font32 t-20 font600 f-c-c circle14"
              @click="set_cancel"
              >关闭</view
            >
            <!-- <view class="w270 h90 bg-theme font32 t-20 font600 f-c-c circle14" @click="get_purchass()">确定</view> -->
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import Header from "../../../components/header.vue";
import ImageFile from "../../../components/img_file.vue";
import richText from "../../ticket/components/rich-text.vue";
import wxPay from "../../../common/weixinPay.js";

import { my_order_detail } from "../../../api/order.js";
import QrCode from "./qrCode.vue";
export default {
  components: {
    Header,
    ImageFile,
    QrCode,
    richText,
  },
  mixins: [wxPay],
  data() {
    return {
      baseUrl: `${uni.getStorageSync("file") || ""}/file`,
      bar_height: 0,
      ticketCodeInfo: "",
      details: {},
      qrcode: {},
    };
  },
  created() {
    this.bar_height = uni.getStorageSync("toprpx"); //顶部高度
  },
  onLoad(val) {
    this.get_details(val.id);
  },

  methods: {
    handleRow(item, index) {
      item.isShowMsg = !item.isShowMsg;
      this.$set(this.details.goodsList, index, item);
      console.log(item);
    },
    ticketCode(val) {
      if (this.details?.orderStatus === "PAID") {
        return !!val.qrCode;
      }
      return false;
    },
    get_pay(val) {
      let data = {
        orderIdList: [val.id], // 订单id集合
        payFee: val.goodsFee, // 支付金额
        id: val.id, //outTradeNo
      };
      this.get_wx_order(data);
    },
    copy_order(val) {
      uni.setClipboardData({
        data: this.details.id,
        success: function () {
          console.log("success");
        },
      });
    },
    async get_details(id) {
      const { code, body } = await my_order_detail({ id });
      if (code === "0") {
        // body.goodsInfo = JSON.parse(body.goodsJson);
        body.goodsList =
          body.orderItemList.map((v) => {
            return {
              ...v,
              // content: v.content.replace(
              //   /src="/g,
              //   'src="https://pw.wohongkeji.com'
              // ),
              isShowMsg: false,
            };
          }) || [];
        body.totalNum = 0;
        body.orderItemList.forEach(item => {
          body.totalNum += item.number;
        });
        // 餐饮/商城：一个订单一个二维码
        // 门票/年卡/路线/活动/工坊：一个商品一个二维码
        //订单类型 TICKET：票务/ACTIVITY：活动/YEAR_CARD：年卡/MALL：商城/FOOD：餐饮/MAP：地图/LINE：路线/WORKSHOP：工坊
        if (
          ["MALL", "FOOD"].includes(body.orderType) &&
          body.orderStatus == "PAID"
        ) {
          const { ticketCode, qrCode } = body?.businessInfo;

          let qr_code = ticketCode || qrCode;
          this.ticketCodeInfo = qr_code;
          body.qrCode = qr_code;
        }

        this.details = body;
      }
    },
    show_qrcode(item) {
      console.log("item", item);
      this.$refs.qrcode_code.open();
      this.qrcode = { ...item, show: true };
    },
    set_cancel() {
      this.$refs.qrcode_code.close();
      this.qrcode = {};
    },
  },
};
</script>

<style lang="scss" scoped>
.rounded-left-34 {
  border-radius: 34rpx 34rpx 34rpx 0;
}
.rounded-bottom-34 {
  border-radius: 34rpx 34rpx 0 34rpx;
}
.rounded-right-34 {
  border-radius: 34rpx 0 34rpx 34rpx;
}
.rounded-top-34 {
  border-radius: 0 34rpx 34rpx 34rpx;
}
/* .flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
} */
</style>
